<template>
  <div class="container">
    <div class="title">
      <span class="title-name">{{ title }}</span>
      <span v-if="more" class="more" @click="itemMore"><el-link type="primary">more</el-link></span>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ItemBorder',
  props: {
    title: { type: String, default: '标题' },
    more: { type: Boolean, default: false }
  },
  methods: {
    itemMore() {
      this.$emit('itemMore')
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: url('@/assets/website/3.png') no-repeat;
  background-size: cover;
  margin-top: 5px;
  .title {
    display: flex;
    justify-content: space-between;
  }
  .title-name {
    padding-top: 1px;
    padding-left: 40px;
    font-family: 优设标题黑;
    font-weight: bold;
    display: flex;
    word-break: keep-all;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-image: -webkit-linear-gradient(270deg, white, rgb(182, 236, 255), rgb(145, 227, 255));
  }
  .more {
    padding-top: 1px;
    padding-right: 10px;
    font-family: 优设标题黑;
    font-weight: bold;
    display: flex;
    word-break: keep-all;
    background-clip: text;
  }
  .content {
    height: calc(100% - 30px);
    padding: 0 2px 5px 2px;
  }
}
</style>
